feat: add visual status indicators to the UIToggle component #2698
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add functionality to render a custom "SwitchOn" icon in the UIToggle's thumb element using ReactDOM. Updated styles and component structure to support this change and ensure compatibility.
Introduce on/off icons for the UIToggle component. Updated logic to dynamically render the correct icon based on toggle state and included new SCSS for styling.
Introduce theme-based colors for 'SwitchOn' and 'SwitchOff' icons using `COLORS.thumbOn` and `COLORS.thumbOff`. This allows the icons to adapt to the current theme, improving UI consistency and flexibility.
This removes the UIToggle.scss file and replaces its styles with inline styles in the component logic. The change simplifies style handling by consolidating them into the TypeScript file, reducing dependencies and ensuring better control over dynamic styling.
Updated UIToggle to include consistent default styles for the 'Standard' size, including dimensions and padding. Updated related tests to reflect these changes and ensure correctness. Added JSDoc comments to improve method documentation.
Updated UIToggleSizeInfo properties to be optional for flexibility. Improved documentation by adding JSDoc comments for key methods. Removed a leftover console.log statement for cleaner code.
Introduced SwitchOff and SwitchOn SVG icons. Updated the UIToggle component to include visual indicators for switch status, improving the user interface clarity.
🦋 Changeset detectedLatest commit: 27dd3b2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Removed over 2000 lines of unused or outdated icon definitions from the Icons.tsx file to improve maintainability and reduce code bloat. These icons were no longer being used across the project, and their removal cleans up the codebase.
…buttons_no-onoff-text-is-provided' of https://github.com/SAP/open-ux-tools into feat/32111-bug-acc-2531level-aa_sap-fiori-tools_switch-buttons_no-onoff-text-is-provided
Refined hover and focus styles for UIToggle component, improving visual consistency by aligning with updated design tokens. Updated color variables and positioning, introduced cleaner styles for checked/unchecked states, and unified border behavior.
Refined hover styles for both checked and unchecked toggle states, ensuring proper application of colors and borders. Added fallback to `contrast` variables for better theme compatibility. Removed redundant localStorage theme settings in stories.
Adjusted UIToggle component styles to improve visual consistency, aligning with updated design tokens. Modified border widths, hover, and disabled states for both toggles and thumbs, ensuring they match the latest design guidelines.
Update padding values and improve border color logic for better appearance and consistency in the UIToggle component. Fix issues with incorrect border color assignments for both checked and unchecked states.
Updated `innerPadding` to `0 1px` and refined border color handling to include fallback `transparent`. These changes ensure consistent rendering and improve visual clarity in various states.
815are
previously approved these changes
Dec 16, 2024
There was a problem hiding this comment.
Checked:
- code - easy to understand. As there no any custom renderer available from
flunet-uicurrently do not see better way how to inject icons(alternative maybe font icons or mask-images); - test is maintainer;
- changeset exists
small comment about string value where enum entry can be used
Replaced hardcoded icon names with UiIcons constants in UIToggle. This ensures consistency and easier maintainability for icon usage across the UI components.
815are
previously approved these changes
Dec 16, 2024
Marked toggleRootRef as readonly to prevent unintended reassignments. This ensures immutability and improves the reliability of the component.
815are
approved these changes
Dec 16, 2024
AlinaGovoruhina
approved these changes
Dec 16, 2024
…ols_switch-buttons_no-onoff-text-is-provided
|
Vladislavs-Silins-SAP
deleted the
feat/32111-bug-acc-2531level-aa_sap-fiori-tools_switch-buttons_no-onoff-text-is-provided
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The following changes were implemented:
SwitchOffandSwitchOnWhile we are at it, we should make toggle switches a bit bigger to better comply with "Target hit area" accessibility topic. They are too small now.